<template>
	<view class="search-page">
		<!-- 搜索栏 -->
		<view class="search-header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="search-bar" :style="{ height: navBarHeight + 'px' }">
				<view class="back-btn" @click="goBack">
					<u-icon name="arrow-left" size="24" color="#fff"></u-icon>
				</view>
				<view class="search-input-wrapper">
					<u-icon name="search" size="18" color="#999"></u-icon>
					<input class="search-input" v-model="searchKeyword" placeholder="搜索商品" @confirm="handleSearch"
						@input="handleInput" focus />
					<view class="clear-btn" v-if="searchKeyword" @click="clearSearch">
						<u-icon name="close-circle-fill" size="16" color="#ccc"></u-icon>
					</view>
				</view>
				<view class="search-btn" @click="handleSearch">
					<text class="search-text">搜索</text>
				</view>
			</view>
		</view>

		<!-- 搜索建议 -->
		<view class="search-suggest" v-if="showSuggest && suggestList.length">
			<view class="suggest-item" v-for="item in suggestList" :key="item.id" @click="selectSuggest(item.keyword)">
				<u-icon name="search" size="14" color="#999"></u-icon>
				<text class="suggest-text">{{ item.keyword }}</text>
				<view class="suggest-action" @click.stop="insertSuggest(item.keyword)">
					<u-icon name="arrow-up-left" size="14" color="#999"></u-icon>
				</view>
			</view>
		</view>

		<!-- 搜索历史和热门搜索 -->
		<view class="search-content" v-if="!hasSearched" :style="{ paddingTop: navbarTotalHeight + 'px' }">
			<!-- 搜索历史 -->
			<view class="history-section" v-if="searchHistory.length">
				<view class="section-header">
					<text class="header-title">历史搜索</text>
				</view>
				<view class="history-divider"></view>
				<view class="history-list">
					<view class="history-item" v-for="(item, index) in searchHistory" :key="index"
						@click="selectHistory(item)">
						{{ item }}
					</view>
				</view>
				<view class="clear-history" @click="clearHistory">
					<u-icon name="trash-fill" size="24" color="#999"></u-icon>
					<text class="clear-text">清空历史记录</text>
				</view>
			</view>

			<!-- 热门搜索 -->
			<!-- <view class="hot-section">
				<view class="section-header">
					<text class="header-title">热门搜索</text>
				</view>
				<view class="tag-list">
					<view class="tag-item hot" v-for="(item, index) in hotKeywords" :key="index"
						@click="selectHot(item.keyword)">
						<text class="tag-text">{{ item.keyword }}</text>
						<view class="hot-icon" v-if="item.isHot">
							<text class="hot-text">热</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 搜索结果 -->
		<view class="search-results" v-if="hasSearched" :style="{ paddingTop: navbarTotalHeight + 'px' }">
			<!-- 筛选栏 -->
			<view class="filter-bar" :style="{ top: navbarTotalHeight + 'px' }">
				<view class="filter-item" :class="{ active: sortType === 'score_total' }"
					@click="changeSort('score_total')">
					<text class="filter-text">综合</text>
				</view>
				<view class="filter-item" :class="{ active: sortType === 'sales_num' }"
					@click="changeSort('sales_num')">
					<text class="filter-text">销量</text>
				</view>
				<view class="filter-item" :class="{ active: sortType === 'rebate_money' }"
					@click="changeSort('rebate_money')" style="display: none;">
					<text class="filter-text">分润</text>
				</view>
				<view class="filter-item price-filter" :class="{ active: sortType === 'sale_price' }"
					@click="changePriceSort">
					<text class="filter-text">价格</text>
					<view class="price-arrows">
						<view class="arrow-up" :class="{active:  sortOrder === 1}">▲</view>
						<view class="arrow-down" :class="{active:  sortOrder === 2}">▼
						</view>
					</view>
				</view>
				<view class="filter-item" @click="showFilterPopup">
					<text class="filter-text">筛选</text>
					<image src="/static/icons/icon-screen--.png" class="filter-icon"></image>
				</view>
			</view>

			<!-- 搜索结果统计 -->
			<!-- <view class="result-info" v-if="!loading">
				<text class="info-text">找到{{ totalCount }}件相关商品</text>
			</view> -->

			<!-- 商品列表 -->
			
			<view class="product-list">
				<view v-for="item in goodsList" :key="item.goods_id || item.id" class="product-item" @click="goGoodsDetail(item.goods_id || item.id)">
					<image :src="baseUrl + (item.file_path || item.img)" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{item.goods_name}}</text>
						<view style="display: flex;flex-direction: column;">
							<text class="rebate">分润 ¥{{item.rebate_price}}</text>
							<text class="price">¥{{item.sale_price}}</text>
						</view>

					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="!loading && hasMore">
				<text class="load-text">上拉加载更多</text>
			</view>

			<!-- 没有更多 -->
			<view class="no-more" v-if="!loading && !hasMore && goodsList.length">
				<text class="no-more-text">没有更多商品了</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!loading && !goodsList.length">
				<image src="/static/empty-search.png" class="empty-image"></image>
				<text class="empty-text">没有找到相关商品</text>
				<text class="empty-desc">试试其他关键词吧</text>
			</view>
		</view>

		<!-- 加载中 -->
		<view class="loading-state" v-if="loading">
			<u-loading-icon mode="spinner" size="24"></u-loading-icon>
			<text class="loading-text">搜索中...</text>
		</view>

		<!-- 筛选弹窗 -->
		<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
			<view class="filter-content" @click.stop>
				<!-- 价格区间 -->
				<view class="filter-section">
					<view class="section-header">
						<text class="section-title">价格区间</text>
					</view>
					<view class="price-range">
						<input class="price-input" v-model="filterData.minPrice" placeholder="最低价" type="number" />
						<text class="price-separator">---</text>
						<input class="price-input" v-model="filterData.maxPrice" placeholder="最高价" type="number" />
					</view>
				</view>

				<!-- 新品 -->
				<view class="filter-section">
					<view class="section-header">
						<text class="section-title">新品</text>
					</view>
					<view class="filter-options">
						<view class="option-item" :class="{ active: filterData.isNew }" @click="toggleNewProduct">
							<text class="option-text">新品</text>
						</view>
					</view>
				</view>

				<!-- 品牌 -->
				<view class="filter-section" v-if="brandList.length">
					<view class="section-header">
						<text class="section-title">品牌</text>
					</view>
					<view class="filter-options">
						<view class="option-item" :class="{ active: filterData.brands.includes(brand.id) }"
							v-for="brand in brandList" :key="brand.id" @click="toggleBrand(brand.id)">
							<text class="option-text">{{ brand.name }}</text>
						</view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="filter-actions">
					<view class="reset-btn" @click="resetFilter">
						<text class="btn-text">重置</text>
					</view>
					<view class="confirm-btn" @click="applyFilter">
						<text class="btn-text">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import config from '@/api/config.js'
	import {
		getToken
	} from '@/api/auth.js'

    export default {
        data() {
            return {
                baseUrl: config.API_BASE_URL,
                imgUrl: config.SERVER_ADDRESS,
                statusBarHeight: 0,
                navBarHeight: 44,
                searchKeyword: '',
                showSuggest: false,
                hasSearched: false,
                loading: false,
                showFilter: false,
                sortType: 'score_total', // default, sales, price_asc, price_desc
                page: 1,
                pageSize: 20,
                hasMore: true,
                totalCount: 0,
                sortOrder: 1,

                // 搜索建议
                suggestList: [],

                // 搜索历史
                searchHistory: [],

                // 热门搜索
                hotKeywords: [],

                // 商品列表
                goodsList: [],

                // 筛选数据
                filterData: {
                    minPrice: '',
                    maxPrice: '',
                    brands: [],
                    categories: [],
                    isNew: false
                },

                // 品牌列表
                brandList: [],

                // 分类列表
                categoryList: []
            }
        },
        computed: {
            // 导航栏总高度（px）
            navbarTotalHeight() {
                return this.statusBarHeight + this.navBarHeight
            }
        },
        onLoad(options) {
            // 获取系统信息
            const systemInfo = uni.getSystemInfoSync()
            this.statusBarHeight = systemInfo.statusBarHeight || 0
            
            if (options.keyword) {
                this.searchKeyword = decodeURIComponent(options.keyword)
                this.handleSearch()
            }
            this.loadSearchHistory()
            // this.loadHotKeywords()
            // this.loadFilterData()
        },
        onReachBottom() {
            if (this.hasSearched && this.hasMore && !this.loading) {
                this.loadMore()
            }
        },
        methods: {
            // 处理输入
            handleInput() {
                if (this.searchKeyword.trim()) {
                    this.showSuggest = true
                    this.loadSuggest()
                } else {
                    this.showSuggest = false
                    this.suggestList = []
                }
            },

            // 加载搜索建议
            async loadSuggest() {
				if (!this.searchKeyword.trim()) {
					this.suggestList = []
					return
				}

				try {
					const result = await api.searchApi.getSuggest({
						keyword: this.searchKeyword
					})

					if (result.r === 0) {
						this.suggestList = result.data.list || []
					} else {
						this.suggestList = []
					}
				} catch (error) {
					console.error('获取搜索建议失败:', error)
					this.suggestList = []
				}
			},

			// 选择搜索建议
			selectSuggest(keyword) {
				this.searchKeyword = keyword
				this.handleSearch()
			},

			// 插入搜索建议
			insertSuggest(keyword) {
				this.searchKeyword = keyword
				this.showSuggest = false
			},

			// 清空搜索
			clearSearch() {
				this.searchKeyword = ''
				this.showSuggest = false
				this.suggestList = []
			},

			// 执行搜索
			handleSearch() {
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
					return
				}

				this.showSuggest = false
				this.hasSearched = true
				this.page = 1
				this.goodsList = []
				this.hasMore = true

				// 保存搜索历史
				this.saveSearchHistory(this.searchKeyword)

				// 执行搜索
				this.loadSearchResults()
			},

			// 加载搜索结果
			async loadSearchResults() {
				if (this.loading) return

				try {
					this.loading = true

// 构建价格区间参数
					let priceRange = '0,999999999999'
					if (this.filterData.minPrice && this.filterData.maxPrice) {
						priceRange = `${this.filterData.minPrice},${this.filterData.maxPrice}`
					}

					// 构建搜索参数
					const params = {
						keyword: this.searchKeyword,
						page: this.page,
						limit: this.pageSize,
						sort_type: this.sortType,
						sale_price: priceRange,
						order: this.sortOrder,
						is_new: this.filterData.isNew ? 1 : 0,
						brand: this.filterData.brands.join(',')
					}

					// 添加筛选条件
					// if (this.filterData.minPrice) {
					// 	params.min_price = this.filterData.minPrice
					// }
					// if (this.filterData.maxPrice) {
					// 	params.max_price = this.filterData.maxPrice
					// }
					
					
					// if (this.filterData.brands.length > 0) {
					// 	params.brand_ids = this.filterData.brands.join(',')
					// }
					if (this.filterData.categories.length > 0) {
						params.category_ids = this.filterData.categories.join(',')
					}

					const result = await api.searchApi.searchGoods(params)

					if (result.r === 0) {
						const data = result.data
						const goodsList = data.goods || []
						if (this.page === 1) {
							this.goodsList = goodsList
						} else {
							this.goodsList.push(...goodsList)
						}

						this.totalCount = data.total || 0
						this.hasMore = this.goodsList.length < this.totalCount
					} else {
						if (this.page === 1) {
							this.goodsList = []
							this.totalCount = 0
						}
						this.hasMore = false
						uni.showToast({
							title: result.msg || '搜索失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('搜索失败:', error)
					if (this.page === 1) {
						this.goodsList = []
						this.totalCount = 0
					}
					this.hasMore = false
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 加载热门搜索
			async loadHotKeywords() {
				try {
					const result = await api.searchApi.getHotKeywords()

					if (result.r === 0) {
						this.hotKeywords = result.data.list || []
					}
				} catch (error) {
					console.error('获取热门搜索失败:', error)
				}
			},

			// 加载筛选数据
			async loadFilterData() {
				try {
					const [brandResult, categoryResult] = await Promise.allSettled([
						api.brandApi.getBrandList(),
						api.categoryApi.getCategoryList()
					])

					// 处理品牌数据
					if (brandResult.status === 'fulfilled' && brandResult.value.r === 0) {
						this.brandList = brandResult.value.data.list || []
					}

					// 处理分类数据
					if (categoryResult.status === 'fulfilled' && categoryResult.value.r === 0) {
						this.categoryList = categoryResult.value.data.list || []
					}
				} catch (error) {
					console.error('获取筛选数据失败:', error)
				}
			},

			// 加载更多
			loadMore() {
				this.page++
				this.loadSearchResults()
			},

			// 选择历史搜索
			selectHistory(keyword) {
				this.searchKeyword = keyword
				this.handleSearch()
			},

			// 选择热门搜索
			selectHot(keyword) {
				this.searchKeyword = keyword
				this.handleSearch()
			},

			// 清空搜索历史
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空搜索历史吗？',
					success: res => {
						if (res.confirm) {
							this.searchHistory = []
							uni.removeStorageSync('searchHistory')
							uni.showToast({
								title: '已清空',
								icon: 'success'
							})
						}
					}
				})
			},

			// 保存搜索历史
			saveSearchHistory(keyword) {
				const history = this.searchHistory.filter(item => item !== keyword)
				history.unshift(keyword)
				this.searchHistory = history.slice(0, 10) // 最多保存10条
				uni.setStorageSync('searchHistory', this.searchHistory)
			},

			// 加载搜索历史
			loadSearchHistory() {
				try {
					const history = uni.getStorageSync('searchHistory')
					if (history) {
						// 确保是数组
						if (Array.isArray(history)) {
							this.searchHistory = history
						} else if (typeof history === 'string') {
							// 如果是字符串，尝试解析JSON
							try {
								this.searchHistory = JSON.parse(history)
							} catch (e) {
								this.searchHistory = []
							}
						} else {
							this.searchHistory = []
						}
					}
				} catch (error) {
					console.error('加载搜索历史失败:', error)
					this.searchHistory = []
				}
			},

			// 改变排序
			changeSort(type) {
				this.sortType = type
				this.page = 1
				this.goodsList = []
				this.loadSearchResults()
			},

			// 改变价格排序
			changePriceSort() {

				this.sortType = 'sale_price'
				if (this.sortOrder === 1) {
					this.sortOrder = 2 // 切换为降序
				} else {
					this.sortOrder = 1 // 切换为升序
				}
				this.page = 1
				this.goodsList = []
				this.loadSearchResults()
			},

			// 显示筛选弹窗
			showFilterPopup() {
				this.showFilter = true
			},

			// 隐藏筛选弹窗
			hideFilterPopup() {
				this.showFilter = false
			},

			

			// 切换品牌
			toggleBrand(brandId) {
				const index = this.filterData.brands.indexOf(brandId)
				if (index > -1) {
					this.filterData.brands.splice(index, 1)
				} else {
					this.filterData.brands.push(brandId)
				}
			},

			// 切换分类
			toggleCategory(categoryId) {
				const index = this.filterData.categories.indexOf(categoryId)
				if (index > -1) {
					this.filterData.categories.splice(index, 1)
				} else {
					this.filterData.categories.push(categoryId)
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 跳转商品详情
			goGoodsDetail(goodsId) {
				uni.navigateTo({
					url: `/pages/goods/detail?id=${goodsId}`
				})
			},

			// 收藏/取消收藏
			async toggleFavorite(goods) {
				// 检查登录状态
				const token = getToken()
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return
				}

				try {
					const result = goods.isFavorite ?
						await api.favoriteApi.removeFavorite({
							goods_id: goods.id
						}) :
						await api.favoriteApi.addFavorite({
							goods_id: goods.id
						})

					if (result.r === 0) {
						goods.isFavorite = !goods.isFavorite
						uni.showToast({
							title: goods.isFavorite ? '已收藏' : '已取消收藏',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: result.msg || '操作失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('收藏操作失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// 加入购物车
			async addToCart(goods) {
				// 检查登录状态
				const token = getToken()
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return
				}

				try {
					const result = await api.cartApi.addToCart({
						goods_id: goods.id,
						quantity: 1
					})

					if (result.r === 0) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: result.msg || '加入购物车失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加入购物车失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},
			// 重置筛选
			resetFilter() {
				this.filterData = {
					minPrice: '',
					maxPrice: '',
					brands: [],
					categories: [],
					isNew: false
				}
				this.applyFilter()
			},
			
			// 应用筛选
			applyFilter() {
				this.hideFilterPopup()
				this.page = 1
				this.goodsList = []
				this.loadSearchResults()
			},
			
			// 切换新品筛选
			toggleNewProduct() {
				this.filterData.isNew = !this.filterData.isNew
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-header {
		background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		box-shadow: 0 4rpx 24rpx rgba(255, 128, 51, 0.15);

		.search-bar {
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.back-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 56rpx;
				height: 56rpx;
				margin-right: 20rpx;
			}

			.search-input-wrapper {
				flex: 1;
				max-width: 300rpx;
				height: 56rpx;
				background-color: #f8f8f8;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				padding: 0 24rpx;
				gap: 12rpx;

				.search-input {
					flex: 1;
					height: 56rpx;
					border: none;
					outline: none;
					background: transparent;
					font-size: 28rpx;
					color: #333;
				}

				.clear-btn {
					padding: 4rpx;
				}
			}

			.search-btn {
				padding: 0 20rpx;
				margin-left: 16rpx;

				.search-text {
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}

	.search-suggest {
		background-color: #fff;
		border-bottom: 2rpx solid #f0f0f0;

		.suggest-item {
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			gap: 20rpx;
			border-bottom: 2rpx solid #f8f8f8;

			&:last-child {
				border-bottom: none;
			}

			.suggest-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.suggest-action {
				padding: 10rpx;
			}
		}
	}

	.search-content {
		background: #fff;

		.history-section {
			.section-header {
				padding: 40rpx 30rpx 20rpx;

				.header-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
				}
			}

			.history-divider {
				height: 1rpx;
				background: #e5e5e5;
			}

			.history-list {
				display: flex;
				flex-direction: column;

				.history-item {
					padding: 30rpx;
					font-size: 30rpx;
					color: #333;
					border-bottom: 1rpx solid #f5f5f5;
					transition: background 0.3s;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background: #f8f9fa;
					}
				}
			}

			.clear-history {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 60rpx 30rpx;
				gap: 8rpx;

				.clear-text {
					font-size: 28rpx;
					color: #000;
				}
			}
		}
	}

	.search-results {
		
		.filter-bar {
			height: 88rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			z-index: 999;

			.filter-item {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;
				position: relative;

				&.active {
					.filter-text {
						color: #27B387;
						font-weight: 500;
					}
				}

				.filter-text {
					font-size: 28rpx;
					color: #666;
				}

				.filter-icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}

				&.price-filter {
					display: flex;

					.price-arrows {
						display: flex;
						flex-direction: column;
						margin-left: 8rpx;

						.arrow-up,
						.arrow-down {
							font-size: 16rpx;
							color: #ccc;
							line-height: 1;

							&.active {
								color: #27B387;
							}
						}
					}
				}
			}
		}

		.result-info {
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f0f0f0;

			.info-text {
				font-size: 24rpx;
				color: #999;
			}
		}

		/* 商品列表 */
		.product-list {
			padding: 20rpx;
			padding-top: 108rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.product-item {
			width: 48%;
			background-color: white;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
		}

		.product-item image {
			width: 100%;
			height: 240rpx;
		}

		.info {
			padding: 16rpx;
		}

		.name {
			font-size: 26rpx;
			color: #333;
			line-height: 1.4;
			margin-bottom: 8rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			height: 72rpx;
			/* 26rpx * 1.4 * 2 ≈ 72rpx */
		}

		.rebate {
			font-size: 22rpx;
			color: #999;
			margin-bottom: 8rpx;
		}

		.price {
			font-size: 32rpx;
			color: #ff6b35;
			font-weight: bold;
		}

		.no-products {
			text-align: center;
			padding: 80rpx 40rpx;
			color: #999;
			display: flex;
			flex-direction: column;
		}

		.load-more,
		.no-more {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.load-text,
			.no-more-text {
				font-size: 24rpx;
				color: #999;
			}
		}

		.empty-state {
			padding: 120rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-image {
				width: 240rpx;
				height: 240rpx;
				margin-bottom: 40rpx;
			}

			.empty-text {
				font-size: 32rpx;
				color: #666;
				margin-bottom: 16rpx;
			}

			.empty-desc {
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.loading-state {
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;

		.loading-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.filter-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		justify-content: flex-end;

		.filter-content {
			width: 560rpx;
			height: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;

			.filter-section {
				padding: 30rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.section-header {
					margin-bottom: 24rpx;

					.section-title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333;
					}
				}

				.price-range {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.price-input {
						flex: 1;
						height: 72rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						color: #333;
					}

					.price-separator {
						font-size: 28rpx;
						color: #999;
					}
				}

				.filter-options {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;

					.option-item {
						padding: 16rpx 24rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 8rpx;
						background-color: #fff;
						position: relative;

						&.active {
							border-color: #ff6b35;

							.option-text {
								color: #ff6b35;
							}

							&::before {
								content: '';
								position: absolute;
								top: 32rpx;
								width: 24rpx;
								height: 24rpx;
								background-image: url('/static/icons/Right.svg');
								background-size: contain;
								background-repeat: no-repeat;
							}
						}

						.option-text {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
			}

			.filter-actions {
				margin-top: auto;
				padding: 30rpx;
				display: flex;
				gap: 20rpx;

				.reset-btn,
				.confirm-btn {
					flex: 1;
					height: 88rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.btn-text {
						font-size: 28rpx;
					}
				}

				.reset-btn {
					background-color: #f8f8f8;
					border: 2rpx solid #e0e0e0;

					.btn-text {
						color: #666;
					}
				}

				.confirm-btn {
					background-color: #27B387;

					.btn-text {
						color: #fff;
					}
				}
			}
		}
	}
</style>